<template>
  <a-card :bordered="false">

    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24" type="flex">
          <a-col flex="350px">
            <a-form-item label="">
              <a-input-group compact>
                <a-select v-model="queryParam.searchField" @change="changeForceUpdate">
                  <a-select-option value="projectNo"> 项目编号 </a-select-option>
                  <a-select-option value="projectName"> 项目名称 </a-select-option>
                  <a-select-option value="projectManager"> 项目经理 </a-select-option>
                </a-select>
                <a-input-search
                  style="width: 65%"
                  v-model="queryParam.keyword"
                  @search="searchQuery"
                  placeholder="请按照关键字进行搜索"
                />
              </a-input-group>
            </a-form-item>
          </a-col>
          <a-col flex="auto">
            <span class="flex-btn-line">
              <a-button type="primary" @click="showSearchForm = true" icon="search">高级查询</a-button>
              <a-button type="primary" @click="doSearchReset" icon="reload">重置</a-button>
              <a-button
                type="primary"
                @click="handlePostExportXls('科技文献报表（个人维度）')"
                icon="vertical-align-bottom"
              >导出</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <a-modal
      :visible="showSearchForm"
      width="70vw"
      :bodyStyle="{ padding: '10px' }"
      title="高级查询"
      @ok="handleToSearch"
      @cancel="showSearchForm = false"
    >
      <a-form-model ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-model-item label="项目编号">
              <a-input v-model="queryParam.projectNo" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="项目名称">
              <a-input v-model="queryParam.projectName" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="项目经理">
              <a-input v-model="queryParam.projectManager" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-model-item label="所属部门">
              <a-input v-model="queryParam.mainDeptName" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="项目状态">
              <a-select v-model="queryParam.projectStatus">
                <a-select-option value="4"> 执行中 </a-select-option>
                <a-select-option value="5"> 待验收 </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="是否达标">
              <a-select v-model="queryParam.reachTarget">
                <a-select-option value="1"> 是 </a-select-option>
                <a-select-option value="0"> 否 </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator"></div>
    <div class="container">
      <a-table
        ref="table"
        bordered
        size="middle"
        :rowKey="rowKey"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :scroll="{ x: true }"
      >
      </a-table>
    </div>

    <!-- table区域-begin -->
  </a-card>
</template>

<script>
  import { getAction, postAction } from '@/api/manage'
  import { codeInfoList } from '@/api/codeInfo'
  import { JeecgListMixin } from '@/mixins/JeecgListSearchMixin'
  import moment from 'moment'

  export default {
    name: 'ProjectLibPersonalReport',
    mixins: [JeecgListMixin],
    data() {
      return {
        /* 勾选导出参数 */
        rowKey: 'id',
        columns: [
          {title: '排名',dataIndex: 'rank',align: 'center',width:'80px',},
          {title: '项目编号',dataIndex: 'projectNo',align: 'center',width:'100px',},
          {title: '项目名称',dataIndex: 'projectName',align: 'center',width:'150px',},
          {title: '项目经理',dataIndex: 'projectManager',align: 'center',width:'100px',},
          {title: '项目等级',dataIndex: 'projectLevel',align: 'center',width:'80px',},
          {title: '项目状态',dataIndex: 'projectStatus',align: 'center',width:'80px',},
          {title: '上市时间',dataIndex: 'listDate',align: 'center',width:'100px',},
          {title: '所属部门',dataIndex: 'mainDeptName',align: 'center',width:'120px',},
          {title: '应入库文献数量',dataIndex: 'needLibCount',align: 'center',width:'100px',},
          {title: '实际入库文献数量',dataIndex: 'libCount',align: 'center',width:'100px',},
          {title: '是否达标',dataIndex: 'reachTarget',align: 'center',width:'80px',},
        ],
        url: {
          list: '/projectReport/projectLibProjectReport',
          exportXlsUrl: '/projectReport/projectLibProjectReportExport',
          codeInfoList: '/manage/codeInfo/list',
        },
        labelCol: { span: 8 },
        wrapperCol: { span: 15 },
        showSearchForm: false,
      }
    },
    mounted() {
      this.queryParam.searchField = 'projectNo';
      this.queryParam.keyword = '';
    },
    methods: {
      handleToSearch() {
        this.showSearchForm = false;
        this.searchQuery()
      },
      doSearchReset() {
        this.queryParam={
          searchField: 'projectNo',
          projectNo:'',
          projectName:'',
          projectManager:'',
          mainDeptName:'',
          projectStatus:'',
          reachTarget:'',
        }
        this.searchQuery()
      },
    },
  }
</script>
<style lang="less" scoped>
  @import '~@assets/less/common.less';
  @import '~@assets/less/hte-main.less';
  @media (max-width: 1170px) {
    .page-main .container section .list-content > div.flex-num1-box {
      flex-wrap: wrap;
      > div {
        &:nth-child(1),
        &:nth-child(2) {
          width: 48%;
        }
        &:nth-child(3) {
          width: 100%;
          justify-content: flex-start;
          > span {
            margin-right: 20px;
            margin-left: 0;
          }
        }
      }
    }
    .page-main .container section .list-content > div.flex-num2-box {
      display: block;
      margin-top: 0;
    }
  }
  /deep/ .ant-modal-content {
    border-radius: 15px;
  }
  /deep/ .ant-modal-title,
  /deep/ .ant-modal-footer {
    text-align: center;
  }
  /deep/ .ant-transfer-operation .ant-btn-primary {
    background-color: #f5f5f5 !important;
  }
  /deep/ .ant-modal-header {
    border-radius: 15px 15px 0 0;
    background-image: linear-gradient(90deg, #15b1ff 0%, #1158c9 100%);
  }
  /deep/ .ant-modal-title {
    color: #fff;
  }
</style>
